import { Button, Divider, Stack, Typography } from '@mui/material'
import { styled } from '@mui/material/styles'
import { useAppSelector } from '../../hooks'
import { selectCartProducts } from '../../store/reducers/selectors'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	justifyContent: 'flex-start',
	flexDirection: 'column',
	padding: '0px 12px 12px 12px',
	gap: '12px',
	width: '620px',
	height: '62px',
}))

const StyledButton = styled(Button)(() => ({
	display: 'flex',
	alignSelf: 'center',
	width: '100%',
	height: '40px',
	borderRadius: '55px',
	background: '#FFE44D',
	border: '0px',
	'&': {
		color: '#1A1A1A',
		textTransform: 'none',
	},
}))

const StyledDivider = styled(Divider)(() => ({
	margin: '12px 0px 12px 0px',
}))

const CartSummary = () => {
	const cartProducts = useAppSelector(selectCartProducts)
	const price =
		cartProducts?.reduce(
			(acc, curr) => acc + curr.price * curr.purchaseAmount,
			0
		) || 0
	const discount =
		cartProducts?.reduce(
			(acc, curr) =>
				acc + curr.price * curr.purchaseAmount * (curr.discount / 100),
			0
		) || 0

	return (
		<>
			{cartProducts && (
				<StyledContainer>
					<Typography variant='h6' fontWeight={'bold'}>
						Ваша корзина
					</Typography>
					<Stack direction={'row'} justifyContent={'space-between'}>
						<Typography variant='body2' color={'#7B8E98'}>
							{`Товары (${cartProducts?.length})`}
						</Typography>
						<Typography variant='body2'>{`${price} ₽`}</Typography>
					</Stack>
					<Stack direction={'row'} justifyContent={'space-between'}>
						<Typography variant='body2' color={'#7B8E98'}>
							Скидка
						</Typography>
						<Typography variant='body2' color={'#F44336'}>
							{`- ${discount} ₽`}
						</Typography>
					</Stack>
					<StyledDivider />
					<Stack direction={'row'} justifyContent={'space-between'}>
						<Typography variant='body2' fontWeight={'bold'}>
							Общая стоимость
						</Typography>
						<Typography variant='body1' fontWeight={'bold'}>
							{`${price - discount} ₽`}
						</Typography>
					</Stack>
					<StyledButton>Оформить заказ</StyledButton>
					<StyledDivider />
				</StyledContainer>
			)}
		</>
	)
}

export default CartSummary
